<template>
  <div class="cont">
    <div class="chart" ref="chartRef"></div>
    <img src="@img/12.webp" alt="" class="prev-btn" @click="prev" />
    <img src="@img/13.webp" alt="" class="next-btn" @click="next" />
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, getCurrentInstance, computed, watch } from 'vue';
import echarts from '@/plugins/echarts.js';
import { realPx } from '@/utils/index.js';

let myChart = null;
const chartRef = ref(null);

const props = defineProps({
  xData: {
    type: Array,
    default: () => {
      return ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    },
  },
  yData: {
    type: Array,
    default: () => [
      [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      [4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
    ],
  },
});

watch(
  () => props.yData,
  () => {
    myChart.setOption(getOptions());
  },
  { deep: true }
);

onMounted(() => {
  myChart = echarts.init(getCurrentInstance().refs.chartRef);
  myChart.setOption(getOptions());
  window.addEventListener('resize', resizeChart);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeChart);
});

const start = ref(0);
const step = computed(() => {
  return (1 / props.xData.length) * 100;
});

const end = ref(7 * step.value);

// 上一个月
function prev() {
  if (start.value > 0) {
    start.value -= step.value;
    end.value -= step.value;
    myChart.setOption(getOptions());
  }
}
// 下一个月
function next() {
  if (end.value < 95) {
    end.value += step.value;
    start.value += step.value;
    myChart.setOption(getOptions());
  }
}

function getOptions() {
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      top: realPx(0),
      itemWidth: realPx(8),
      itemHeight: realPx(8),
      itemGap: realPx(30),
      textStyle: {
        color: '#fff',
        fontSize: realPx(16),
      },
    },
    grid: {
      left: '4%',
      top: '12%',
      right: '4%',
      bottom: '0%',
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: 'slider',
        start: start.value,
        end: end.value,
      },
    ],
    xAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        axisLabel: {
          color: '#fff',
          fontSize: realPx(16),
        },
        data: props.xData,
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          color: '#fff',
          fontSize: realPx(16),
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(255,255,255,0.3)',
          },
        },
      },
    ],
    series: [
      {
        name: '项目',
        type: 'bar',
        barGap: '15%',
        barWidth: '30%',
        emphasis: {
          focus: 'series',
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(20, 190, 251, 1)' },
            { offset: 1, color: 'rgba(20, 190, 251, 0.3)' },
          ]),
        },
        data: props.yData[0],
      },
      {
        name: '金额',
        type: 'line',
        emphasis: {
          focus: 'series',
        },
        itemStyle: {
          color: '#FFFB6C',
        },
        data: props.yData[1],
      },
    ],
  };
}

function resizeChart() {
  myChart.setOption(getOptions());
  myChart.resize();
}
</script>

<style lang="less" scoped>
.cont {
  width: 426px;
  height: 330px;
  position: relative;
  .prev-btn {
    width: 21.05px;
    height: 28px;
    position: absolute;
    left: 32px;
    bottom: -6px;
    cursor: pointer;
  }
  .next-btn {
    width: 21.05px;
    height: 28px;
    position: absolute;
    right: 8px;
    bottom: -6px;
    cursor: pointer;
  }
}
.chart {
  width: 426px;
  height: 330px;
}
</style>
